import React from "react"
import Logo from "../../statics/logo.jpeg"
import classNames from "classnames"
import { CSSTransition } from "react-transition-group"
import styles from "./style.module.scss"
import { connect } from "react-redux"
import { Dispatch } from "redux"
import { rootState } from "../../store"
import { getHotSearch, IFocusActionType } from "./store/reducer"
import { Link } from "react-router-dom"
// import { HeaderWrapper } from "./style"

interface IHeaderProps {
	focused: boolean
	mouseIn: boolean
	list: string[]
	handleSearchFocus: () => void
	handleSearchBlur: () => void
	handleMouseEnter: () => void
	handleMouseLeave: () => void
}

const Header: React.FC<IHeaderProps> = props => {
	const searchClasses = classNames("me-2 bg-transparent border-0", {
		[styles["search-input"]]: true,
	})

	return (
		<div className="p-2 border-bottom d-flex align-items-center">
			<Link to="/" className="me-5">
				<img className={styles["logo-pic"]} src={Logo} alt="logo" />
			</Link>
			<div className="d-flex align-items-center justify-content-between flex-grow-1 align-self-stretch">
				<div className="d-flex align-items-center">
					<div className="pe-3 text-danger flex-shrink-0 fw-bold">首页</div>
					<div className="pe-3 flex-shrink-0">下载</div>
					<div className={"rounded-pill py-2 px-3 border-0 bg-light fs-6 flex-shrink-0 " + styles["search-input-container"]}>
						<CSSTransition in={props.focused} timeout={200} classNames="slide">
							<input className={searchClasses} type="text" placeholder="搜索" onFocus={props.handleSearchFocus} onBlur={props.handleSearchBlur} />
						</CSSTransition>
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className={`"bi bi-search ${props.focused ? "text-warning" : ""}`} viewBox="0 0 16 16">
							<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
						</svg>
						{(props.focused || props.mouseIn) && (
							<div className={"p-2 shadow-sm border rounded bg-white text-black-50 " + styles["search-input-recommend"]} onMouseEnter={props.handleMouseEnter} onMouseLeave={props.handleMouseLeave}>
								<div className="d-flex justify-content-between mb-2">
									<span>热门搜索</span>
									<span>
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-repeat me-1" viewBox="0 0 16 16">
											<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z" />
											<path
												fillRule="evenodd"
												d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"
											/>
										</svg>
										换一换
									</span>
								</div>
								<div>
									{props.list.map((item, index) => (
										<span className="d-inline-block p-1 border mb-2 me-2 rounded" key={index}>
											{item}
										</span>
									))}
								</div>
							</div>
						)}
					</div>
				</div>
				<div className="d-flex align-items-center flex-shrink-0">
					<div className="pe-3">Aa</div>
					<div className="pe-3">登录app</div>
					<button type="button" className="btn btn-outline-danger rounded-pill px-4 me-3">
						注册
					</button>
					<button type="button" className="btn btn-danger rounded-pill px-4">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pen me-1" viewBox="0 0 16 16">
							<path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001zm-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z" />
						</svg>
						写文章
					</button>
				</div>
			</div>
		</div>
	)
}

const mapStateToProps = (state: rootState) => {
	return {
		focused: state.header.focused,
		list: state.header.list,
		mouseIn: state.header.mouseIn,
	}
}

const mapDispatchProps = (dispatch: Dispatch) => {
	return {
		handleSearchFocus() {
			dispatch({
				type: IFocusActionType.FOCUS,
			})
			dispatch<any>(getHotSearch)
		},

		handleSearchBlur() {
			dispatch({
				type: IFocusActionType.BLUR,
			})
		},

		handleMouseEnter() {
			console.log("in")

			dispatch({
				type: IFocusActionType.MOUSE_ENTER,
			})
		},

		handleMouseLeave() {
			console.log("out")

			dispatch({
				type: IFocusActionType.MOUSE_LEAVE,
			})
		},
	}
}

export default connect(mapStateToProps, mapDispatchProps)(Header)
